<template>
  <div class="todo-list-edit-item">
    <el-dialog :title="isToDoEidt ? '编辑云待办' : '新增云待办'" :visible.sync="isToDoEditItemVisible" width="500px" :before-close="handleClose">
      <el-form ref="todoForm" :model="todoForm" label-width="80px" >
        <el-form-item 
            label="标题"
            prop="title"
            :rules="{ required: true, message: '标题不能为空', trigger: 'blur' }">
          <el-input v-model="todoForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="请输入内容"
            v-model="todoForm.content">
          </el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-checkbox-group v-model="todoForm.tags">
            <el-checkbox-button label="日常"></el-checkbox-button>
            <el-checkbox-button label="工作"></el-checkbox-button>
            <el-checkbox-button label="学习"></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="重要程度">
          <el-popover
            placement="right"
            width="150"
            v-model="visible">
            <div class="importance-box">
              <div 
                class="importance-box-item" 
                @click="importanceClick('ImportantAndNotUrgent')"  
                :title="importanceMap['ImportantAndNotUrgent']" 
                :style="`background-color:${importanceColorMap['ImportantAndNotUrgent']};`">
              </div>
              <div 
                class="importance-box-item" 
                @click="importanceClick('ImportantAndUrgent')" 
                :title="importanceMap['ImportantAndUrgent']" 
                :style="`background-color:${importanceColorMap['ImportantAndUrgent']};`">
              </div>
              <div 
                class="importance-box-item" 
                @click="importanceClick('UnimportantAndNotUrgent')" 
                :title="importanceMap['UnimportantAndNotUrgent']" 
                :style="`background-color:${importanceColorMap['UnimportantAndNotUrgent']};`">
              </div>
              <div 
                class="importance-box-item" 
                @click="importanceClick('UnimportantAndUrgent')" 
                :title="importanceMap['UnimportantAndUrgent']" 
                :style="`background-color:${importanceColorMap['UnimportantAndUrgent']};`">
              </div>
            </div>
            <span slot="reference" :style="`color:${importanceColorMap[todoForm.importance]};cursor:pointer;font-weight:bold;`">
              {{ importanceMap[todoForm.importance] }}
              <i class="el-icon-warning-outline" title="点击修改"></i>
            </span>
          </el-popover>
        </el-form-item>
        <el-form-item label="预期完成">
          <el-date-picker type="date" placeholder="选择日期" v-model="todoForm.due_time" style="width: 45%;" value-format="timestamp"></el-date-picker>
        </el-form-item>
        <el-form-item >
          <el-button v-if="!isToDoEidt" @click="onSubmit('todoForm')" type="primary">新增</el-button>
          <el-button v-if="isToDoEidt" @click="onSubmit('todoForm')" type="primary">修改</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data(){
    return {
      visible: false,
      todoForm: {
        todo_id: '',
        userID: '',
        title: '',
        content: '',
        tags: [],
        importance: 'ImportantAndNotUrgent',
        due_time: '',
        create_time: '',
        done_time: '',
        type: 'userToDo',
        progress: 0,
      },
      importanceMap: {
        ImportantAndNotUrgent: '重要但不紧急',
        ImportantAndUrgent: '重要且紧急',
        UnimportantAndNotUrgent: '不重要且不紧急',
        UnimportantAndUrgent: '不重要但紧急'
      },
      importanceColorMap:{
        ImportantAndNotUrgent: '#409EFF',
        ImportantAndUrgent: '#F56C6C',
        UnimportantAndNotUrgent: '#67C23A',
        UnimportantAndUrgent: '#E6A23C'
      }
    }
  },
  watch:{
    currentEditToDo(next){
      Object.assign(this.todoForm, next);
    }
  },
  computed:{
    ...mapState({
      isToDoEidt: state => state.todo.isToDoEidt,
      currentEditToDo: state => state.todo.currentEditToDo,
      currentUserProfile: state => state.user.currentUserProfile,
      isToDoEditItemVisible: state => state.todo.isToDoEditItemVisible
    })
  },
  methods:{
    handleClose(){
      this.reset();
      this.$store.commit('resetCurrentEditToDo');
      this.$store.commit('toggleIsToDoEditItemVisible', false);
    },
    importanceClick(importance){
      this.visible = false;
      this.todoForm.importance = importance;
    },
    onSubmit(ref){
      this.$refs[ref].validate(valid => {
        if (!valid) {
          return false;
        }
        if(this.isToDoEidt){
          this.editToDo();
        } else {
          this.addToDo();
        }
      });
    },
    addToDo(){
      this.todoForm.create_time = new Date().getTime();
      this.todoForm.userID = this.currentUserProfile.userID || 'default';
      this.todoForm.todo_id = Math.floor(Math.random()*10000000).toString() +  Date.now().toString();
      this.$store.dispatch('addToDo', this.todoForm);
      this.reset();
    },
    editToDo(){
      this.$store.dispatch('editToDo', this.todoForm);
      this.reset();
    },
    reset(){
      this.todoForm = {
        todo_id: '',
        userID: '',
        title: '',
        content: '',
        tags: [],
        importance: 'ImportantAndNotUrgent',
        due_time: '',
        create_time: '',
        done_time: '',
        type: 'userToDo',
        progress: 0
      };
    }
  }
}
</script>

<style scoped>
.importance-box{
  position: relative;
  width: 150px;
  height: 150px;
}
.importance-box-item{
  float: left;
  width: 75px;
  height: 75px;
  cursor: pointer;
}
</style>